<template>
  <scroll-view scroll-y class="main">
    <div class="bg-fff" style="position: relative;">
      <div class="photo-img"><img :src="base64Data"  @click="getPicture"/></div>
      <div class="add-icon col-1f476d font-60" @click="getPicture">
        <img style="width: 100%;height: 100%;display: block;border-radius: 50%;"
             src="../../static/img/add.png" >
      </div>
    </div>
    <view class="mg_t_10 bg-fff">
      <u-form :model="list" ref="uForm" label-width="200" label-align="center">
        <u-form-item label="用户昵称">
          <u-input v-model="list.nickName" />
        </u-form-item>
        <u-form-item label="用户简介">
          <u-input type="textarea" placeholder="这个人很懒 什么都没有写" v-model="list.introduction" />
        </u-form-item>
      </u-form>
    </view>

    <div class="bg-fff mg_t_10" style="margin-bottom: 60upx;">
      <u-form :model="list" ref="uForm" label-width="200" label-align="center">
        <u-form-item label="手机号码">
          <u-input v-model="list.phonenumber"  disabled/>
        </u-form-item>
        <u-form-item label="登录密码" v-if="!passwordNow" >
          <u-input v-model="list.password" disabled type="password"/>
          <view class="wrap" slot="right">
            <navigator :url="`/pages/login/set_password?num=1&password=${list.password}`" class="font-26 col-1f476d">修改密码</navigator>
          </view>
        </u-form-item>
        <u-form-item v-if="passwordNow" label="登录密码">
          <u-input v-model="list.password" type="password" disabled placeholder="未设置密码" />
          <view class="wrap" slot="right">
            <navigator url="/pages/login/set_password?num=2" class="font-26 col-1f476d">设置密码</navigator>
          </view>
        </u-form-item>
        <u-form-item label="邮箱地址">
          <u-input v-model="list.email" v-if="list.email" disabled/>
          <u-input v-model="inputEmail" v-if="!list.email" placeholder="请输入邮箱地址"/>
        </u-form-item>
      </u-form>
    </div>

    <div class="user-btn">
      <u-button type="primary" @click="getUser" :custom-style="customStyle" shape="circle">保存</u-button>
    </div>
    <div class="user-btn">
      <u-button type="primary" @click="getExitAccount" :custom-style="customStyle1" shape="circle">退出账号</u-button>
    </div>
    <div class="font-26 text-cent">
      <navigator url="/pages/login/user_use" class="col-1f476d pd_t_19">《用户使用协议》</navigator>
    </div>
    <div class="font-26 text-cent" style="padding-bottom: 20upx">
      <navigator url="/pages/login/user_yin" class="col-1f476d pd_t_19">《隐私政策》</navigator>
    </div>
  </scroll-view>
</template>

<script>
  import {CHECK_EMAIL, TOAST} from "../../util/util";
  import {BASE_URL, request} from "../../util/api";

  export default {
    data() {
    	return {
    		base64Data: "../../static/img/photo.png", //base64数据，destinationType为base64时返回
				duration: 0,
				list: {},
				avatar: '',
				nickName: '',
				introduction: '',
				phonenumber: '',
				password: '',
				email: '',
				passwordNow: false,
        customStyle: {
					background: '#1f476d',
					padding: '0 30rpx'
				},
        customStyle1: {
					background: '#fff',
					padding: '0 30rpx',
          color: '#666'
				},
        inputEmail: ''
      }
    },

    onShow() {
    	this.getCurrentUser()
      this.isPassword()
    },

	  methods: {
		  exchage_code() {
			  if (!this.value) {
				  TOAST('兑换码不能为空！');
			  } else {
				  request({
					  url: '/app/exCode/use/' + this.value,
					  method: 'post'
				  }).then( res => {
				  	uni.showModal({
              title: '提示',
              content: '恭喜您，兑换成功',
              showCancel: false,
              success: function (res) {
                uni.navigateBack()
              }
            });
          })
			  }
		  },
      getUser() {
        let nameInfo = JSON.parse(JSON.stringify(this.list)).nickName
        nameInfo = nameInfo.replace(/[^\u4E00-\u9FA5]/g,'')
        if (nameInfo.length < 2 || nameInfo.length > 6) {
          TOAST('请填写2~6位中文姓名');
          return false;
        }

        if (!this.list.email && !CHECK_EMAIL(this.inputEmail)) {
          TOAST('邮箱格式不正确！');
          return
        }

	      request({
		      url: '/app/userCenter/updateUserInfo',
		      method: 'post',
		      data: {
			      avatar: this.base64Data,
			      nickName: nameInfo,
			      introduction: this.list.introduction,
            email: this.inputEmail ? this.inputEmail : this.list.email
		      }
	      }).then(ret => {
	      	uni.showModal({
            title: '提示',
            content: '保存成功',
            showCancel: false,
            success: function (res) {
              uni.navigateBack()
            }
          });
        })
      },

		  getExitAccount() {
			  request({
				  url: '/app/userCenter/logout'
			  }).then(ret => {
			  	uni.removeStorageSync('zbz_user');
					TOAST('退出成功');
					this.$u.route({
            url: '/pages/login/wx_login',
            type: 'reLaunch'
          })
        })
		  },

      getPicture() {
	      uni.chooseImage({
		      success: (chooseImageRes) => {
			      const tempFilePaths = chooseImageRes.tempFilePaths;
            // 转成base64
            let that = this
			      wx.getFileSystemManager().readFile({
				      filePath: tempFilePaths[0],
				      encoding: "base64",
				      success (res) {
					      that.base64Data = 'data:image/png;base64,' + res.data;
					      // 转换完成，开始执行上传
                that.uploadPic()
				      },
              error(err) {
				      	console.log(err)
              }
			      })
		      }
	      });
      },

		  uploadPic() {
			  uni.showLoading({
				  mask: true,
				  title: '头像上传中'
			  })
        request({
          url: '/common/upload/base64',
          data: {
            file: this.base64Data
          },
          method: 'post'
        }).then(res => {
        	this.base64Data = res.msg;
        })
		  },

      isPassword: function() {
	      request({
		      url: '/app/base/firstLogin'
	      }).then(ret => {
		      if (ret.data) {
			      this.passwordNow = true;
		      } else {
			      this.passwordNow = false;
		      }
	      })
      },

      getCurrentUser() {
        request({
          url: '/app/userCenter/getLoginUserInfo'
        }).then(res => {
          this.list = res.data;
          if(this.list.avatar != '') {
            this.base64Data = this.list.avatar;
          } else {
            this.base64Data = "../../static/img/photo.png";
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  page {
		background: #F7F7F7;
	}
  .main {
    box-sizing: border-box;
    font-size: 32upx;
    height: 100%;
    background: #f7f7f7;
    .photo-img {
      border-radius: 50%;
      margin: 0 auto;
      padding: 76upx 0;
      text-align: center;
      image {
        width: 188upx;
        height: 188upx;
        border-radius: 50%;
      }
    }
    .add-icon {
      position: absolute;
      right: 280upx;
      top: 210upx;
      width: 52upx;
      height: 52upx;
      border-radius: 50%;
      z-index: 1000;
    }
    .user-btn {
      width: 90%;
      margin: 20upx auto;
    }
    .wrap {
      margin-right: 30upx;
    }
    .pd_t_19 {
      padding-top: 20upx;
    }
  }
</style>
